<template>
    <div>
        <div v-for="item in ding" :key="item._id" id="list_item" style="margin-top: 10px;">
            <div id="item_img">
                <img :src="item.img" alt="" style="width:100%;height:100%">
            </div>
            <div id="item_con">
                <div class="ctitle">
                    {{ item.name }}&nbsp;&nbsp;&nbsp;&nbsp;
                    100g/包&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span style="float: right;">共{{ item.num }}件</span>
                </div>
                <div class="cfot">
                    <div class="cfot_left">
                        <span style="color:red;">￥{{ item.price }}</span>
                        <span class="del">{{ item.original }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted} from 'vue';
import axios from 'axios';
const ding = ref([])
const getDing = async () => {
    const { data } = await axios.get('http://localhost:3000/ding');
    ding.value = data.ding;
}
onMounted(() => {
    getDing()
})
</script>

<style lang="scss" scoped>
#list_item {
    width: 100%;
    height: 160px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 1px solid rgb(214, 214, 214);

    #item_img {
        width: 110px;
        height: 110px;
    }

    #item_con {
        width: 80%;
        height: 100%;
        color: rgb(117, 117, 117);
        margin-left: 10px;

        .ctitle {
            width: 100%;
            height: 50px;
        }

        .cnew {
            width: 100%;
            height: 20px;
            color: red;
        }

        .cbtn {
            width: 100%;
            height: 30px;
            margin-top: 10px;
        }

        .cfot {
            width: 100%;
            height: 65px;
            display: flex;
            justify-content: space-between;
            margin-top: 5px;

            .cfot_left {
                width: 35%;
                height: 100%;

                .del {
                    height: 10px;
                    line-height: 10px;
                    text-decoration: line-through;
                }
            }

            .cfot_right {
                width: 65%;
                height: 100%;

                .join {
                    width: 90%;
                    height: 30px;
                    line-height: 30px;
                    background: red;
                    color: white;
                    border-radius: 20px;
                    text-align: center;
                    font-size: 14px;
                }
            }
        }
    }
}
</style>